<template>
  <div class="detail">
    <head1></head1>
    <div class="main">
      <!-- 引入商品轮播 -->
      <swipe :swipeList="this.detail.pics" :picLength="this.detail.pics.length"></swipe>
      <!-- 中间info -->
      <info></info>
      <div class="title">
        <p class="price">{{detail.basicInfo.minPrice | currency}}</p>
        <h5 class="name">{{detail.basicInfo.name}}</h5>
        <van-button
          type="primary"
          size="mini"
          color="#e4393c"
          class="tag"
          plain
        >{{detail.basicInfo.tags}}</van-button>
        <div class="other">
          <p class="batch">{{detail.extJson.batch}}</p>
          <p class="place">{{detail.extJson.place}}</p>
          <p class="chara">{{detail.basicInfo.characteristic}}</p>
        </div>
      </div>
      <div class="section">
        <div class="fare">
          <span class="section-fare_first">运费</span>
          <span>包邮</span>
        </div>
        <div class="stock">
          <span class="section-fare_first">库存</span>
          <span>{{detail.basicInfo.stores}}</span>
        </div>
        <div class="model">
          <span>{{detail.extJson.model}}</span>
        </div>
      </div>
      <div class="content">
        <div class="content-main">
          <h5>商品详情</h5>
          <div v-html="detail.content"></div>
        </div>
      </div>
      <common-linkfloor></common-linkfloor>
    </div>

    <div class="foot">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="咨询" />
        <van-goods-action-icon icon="cart-o" text="购物车" />
        <van-goods-action-icon icon="star-o" text="收藏" />
        <van-goods-action-button type="warning" text="加入购物车" @click="showAction(0)" />
        <van-goods-action-button type="danger" text="立即购买" @click="showAction(1)" />
      </van-goods-action>
    </div>
    <!-- 商品行动 -->
    <div class="bg" v-show="isShow"></div>
    <transition name="gun">
      <sku
        v-show="isShow"
        :sku="detail.basicInfo"
        :actionButton="action"
        @skuHide="hideAction"
        @buyNow="buyNow(detail.basicInfo)"
        @addCart="AddCart(detail.basicInfo)"
      ></sku>
    </transition>
    <common-scolltop></common-scolltop>
  </div>
</template>

<script>
import head1 from "./components/head1";
import swipe from "./components/swipe";
import info from "./components/info";
import { currency } from "@/filters";
import sku from "./components/sku";
import addCart from "../../mixins/addCart";
import CommonLinkfloor from "components/CommonLinkfloor";
import CommonScolltop from "components/CommonScolltop";

export default {
  data() {
    return {
      detail: {
        basicInfo: {
          name: ""
        },
        pics: [],
        content: "",
        picLength: "",
        extJson: {}
      },
      isShow: false,
      action: 0
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.$http
        .get(`/shop/goods/detail?id=${this.$route.params.id}`)
        .then(res => {
          if (res.data.code == 0) {
            this.detail = res.data.data;
            this.picLength = this.detail.pics.length;
          }
        });
    },
    buyNow(item) {
      // 立即购买
      this.add_cart(item);
      setTimeout(()=> {
        this.$router.push({ path: "/cart" });
      }, 1000);
    },
    AddCart(item) {
      this.add_cart(item);
    },
    hideAction() {
      this.isShow = false;
    },
    showAction(action) {
      this.action = action;
      this.isShow = true;
    }
  },
  components: {
    head1,
    swipe,
    info,
    sku,
    CommonLinkfloor,
    CommonScolltop
  },
  mixins: [addCart]
};
</script>

<style lang="less" scoped>
.detail {
  .gun-enter-active,
  .gun-leave-active {
    transition: all 0.1s;
  }
  .gun-enter,
  .gun-leave-to {
    transform: translateY(100%);
  }
  .main {
    padding-top: 65px;
    background: #fafafa;
    padding-bottom: 55px;
    .title {
      padding: 15px;
      background: #fff;
      margin-bottom: 15px;
      .price {
        color: #f30;
        font-family: arial;
        font-size: 18px;
      }
      .name {
        font-weight: 400;
        color: #333;
      }
      .tag {
        margin: 4px 0;
        padding: 0 4px;
        font-weight: 400;
      }
      .other {
        color: #999;
        font: 12px/1.8 "微软雅黑";
        .chara {
          line-height: 1.2;
        }
      }
    }
    .section {
      padding: 15px;
      background: #fff;
      color: #333;
      font-size: 14px;
      line-height: 2;
      &-fare {
        &_first {
          color: #999;
          padding-right: 20px;
        }
      }
      .model {
        color: #999;
      }
    }
    .content {
      width: 100%;
      background: #fafafa;
      h5 {
        padding-top: 10px;
        text-align: center;
        font: 400 20px "微软雅黑";
        color: #333;
        position: relative;
        z-index: 0;
        margin-bottom: 10px;
      }
      h5::before {
        position: absolute;
        z-index: -1;
        bottom: 0px;
        left: center;
        content: "";
        width: 80px;
        height: 6px;
        box-shadow: 0.05555556rem 0.09259259rem 0.16666667rem 0
          rgba(131, 241, 219, 0.59);
        background-image: linear-gradient(90deg, #4bfdf2 0, #4bff8f 100%),
          linear-gradient(#94ffc4, #94ffc4);
      }
      div {
        background: #fff;
        margin: 15px;
        /deep/img {
          margin: 0 auto !important;
          display: block !important;
          width: 300px !important;
          height: 300px !important;
        }
      }
    }
  }
  .foot {
    height: 55px;
    position: relative;
    z-index: 10;
    .van-button {
      height: 55px;
      width: 108px;
      border-radius: 0;
      margin: 0;
      font-size: 16px;
    }
  }
  .bg {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background: rgba(0, 0, 0, 0.6);
  }
}
</style>